<template>
  <div class="aplayers">
    <el-row>
      <el-col :span="24">
        <el-form-item label="参与用户身份:" class="redLabel">
          <el-radio-group v-model="newLimitType" size="small" @change="limitTypeChange">
            <div class="flex-column">
              <div>
                <!-- v-model="limitType" -->
                <el-radio
                  :disabled="disabled"
                  label="NON_LIMIT"
                >所有用户</el-radio>
              </div>
              <div>
                <!-- v-model="limitType" -->
                <el-radio
                  :disabled="disabled"
                  label="LEVEL_LIMIT"
                >按会员等级</el-radio>
              </div>
              <el-button
                v-if="newLimitType === 'LEVEL_LIMIT' && !disabled"
                type="text"
                class="link-label pl-20"
                @click="openLevelDialog()"
              >
                选择会员等级
              </el-button>
              <div>
                <el-tag
                  v-for="tag in levelList"
                  v-if="newLimitType === 'LEVEL_LIMIT'"
                  :key="tag.id"
                  style="margin-right: 10px"
                  :closable="!disabled"
                  :disable-transitions="false"
                  @close="delLevel(tag.id)"
                >
                  {{ tag.name }}
                </el-tag>
              </div>
              <div>
                <!-- v-model="limitType" -->
                <el-radio
                  :disabled="disabled"
                  label="TAGS_LIMIT"
                >会员标签</el-radio>
              </div>
              <el-button
                v-if="newLimitType === 'TAGS_LIMIT' && !disabled"
                type="text"
                class="link-label pl-20"
                @click="openTagDialog()"
              >
                选择标签
              </el-button>
              <div>
                <el-tag
                  v-for="tag in tagList"
                  v-if="newLimitType === 'TAGS_LIMIT'"
                  :key="tag.id"
                  style="margin-right: 10px"
                  :closable="!disabled"
                  :disable-transitions="false"
                  @close="delTag(tag.id)"
                >
                  {{ tag.name }}
                </el-tag>
              </div>
            </div>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <tagEldialog v-if="dialogTagVisible" :echo-dialog-level-visible="dialogTagVisible" :echo-level-list="tagList" :echo-level-check-ids="tagCheckIds" @getTagInfo="getTagInfo" />
    <levelEldialog v-if="dialogLevelVisible" :echo-dialog-level-visible="dialogLevelVisible" :echo-level-list="levelList" :echo-level-check-ids="levelCheckIds" @getLevelInfo="getLevelInfo" />
  </div>
</template>

<script>
import levelEldialog from '@/components/activity_choose_level/activity_choose_level'
import tagEldialog from '@/components/activity_choose_tag/activity_choose_tag'
export default {
  components: {
    levelEldialog,
    tagEldialog
  },
  props: {
    limitType: {
      type: String,
      default: 'NON_LIMIT'
    },
    limitList: {
      type: Array,
      default: []
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      newLimitList: this.limitList,
      newLimitType: this.limitType,
      levelList: [],
      tagList: [],
      levelCheckIds: [],
      tagCheckIds: [],
      dialogTagVisible: false,
      dialogLevelVisible: false
    }
  },
  watch: {
    newLimitList: {
      deep: true,
      handler(val) {
        let limitData = {
          limitList : val,
          limitType: this.newLimitType
        }
        console.log('this.newLimitType',this.newLimitType)
        this.$emit('getLimitInfo', limitData)
        console.log('val_limitList', val)
      }
    }
  },
  mounted() {
    console.log(11111111111)
    if( this.newLimitType === 'LEVEL_LIMIT'){
      this.levelList = this.limitList
      this.levelCheckIds = this.limitList.map(item => item.id)
    }else if(this.newLimitType === 'TAGS_LIMIT'){
      this.tagList = this.limitList
      this.tagCheckIds = this.limitList.map(item => item.id)
    }

    console.log('this.newLimitType', this.newLimitType)
  },
  methods: {
    getLevelInfo(val) {
      this.levelList = val.levelList
      this.levelCheckIds = val.levelCheckIds
      // this.params.memberIdList = val.levelCheckIds
      this.dialogLevelVisible = val.dialogLevelVisible
      this.newLimitList = val.levelList
      this.newLimitType = val.limitType
      console.log('val', val)
      console.log('this.levelList', this.levelList)
      console.log('this.levelCheckIds', this.levelCheckIds)

    },
    getTagInfo(val) {
      this.tagList = val.levelList
      this.tagCheckIds = val.levelCheckIds
      // this.params.memberIdList = val.levelCheckIds
      this.dialogTagVisible = val.dialogLevelVisible
      this.newLimitList = val.levelList
      this.newLimitType = val.limitType
      console.log('this.tagList__getTag',this.tagList)
      console.log('val', val)
    },
    limitTypeChange(limitType) {
      this.levelList = []
      this.levelCheckIds = []
      this.dialogLevelVisible = false
      if(limitType == 'NON_LIMIT'){
        this.newLimitType = limitType
        this.newLimitList = []
      }

      console.log('limitType', limitType)
      console.log('this.newLimitType', limitType)

    },
    // 打开会员标签弹窗
    openTagDialog() {
      console.log('123', this.dialogTagVisible)
      this.dialogTagVisible = true
      this.$forceUpdate()
    },
    // 打开会员等级弹窗
    openLevelDialog() {
      this.dialogLevelVisible = true
      this.$forceUpdate()
    },
    // 会员等级删除
    delLevel(id) {
      console.log('this.levelList',this.levelList)
      this.levelList = this.levelList.filter((item) => item.id !== id)
      this.levelCheckIds = this.levelCheckIds.filter((item) => item !== id)
      this.newLimitList = this.levelList

      // this.params.memberIdList = this.levelCheckIds
    },
    // 会员标签删除
    delTag(id) {
      this.tagList = this.tagList.filter((item) => item.id !== id)
      this.tagCheckIds = this.tagCheckIds.filter((item) => item !== id)
      this.newLimitList = this.tagList
      console.log('this.tagList1',this.tagList.filter((item) => item.id !== id))
      // this.params.memberIdList = this.tagCheckIds
      // console.log('this.tagList', this.tagList)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
